"use client";

import * as React from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { ArrowLeft, Ban, CheckCircle2, Scale, UserCheck, XCircle } from "lucide-react";
import { Button, Tabs } from "@/components/ui";
import { api } from "@/lib/api";
import { toast } from "@/lib/store";
import { timeAgo } from "@/lib/utils";
import { useAdminQuery } from "@/components/admin/use-query";
import type { LedgerRow, RoundRow, SecurityEventRow, SessionRow, UserDetailResponse } from "@/components/admin/types";
import { PageHeader, RefreshButton, Panel, DataTable, ErrorState, TableSkeleton, KV, Pill, UserStatusPill, SeverityPill, ConfirmDialog, DenseInput, DenseTextarea, FieldLabel, InlineError, JsonToggle, Mono, StatTile, StatGrid, type Column } from "@/components/admin/primitives";
import { dateTime, describeError, int, multiplier, sc, signedSC } from "@/components/admin/format";
import { cn } from "@/lib/utils";

type Tab = "ledger" | "rounds" | "sessions" | "events";

const ledgerCols: Column<LedgerRow>[] = [
  { key: "at", header: "When", render: (r) => <span className="text-fg-3">{dateTime(r.createdAt)}</span> },
  { key: "type", header: "Type", render: (r) => <Pill tone={r.type === "ADMIN_ADJUSTMENT" ? "warn" : r.type === "BET" ? "muted" : r.type === "WIN" ? "accent" : "neutral"}>{r.type}</Pill> },
  { key: "amount", header: "Amount", align: "right", render: (r) => <span className={cn(r.amount > 0 ? "text-success" : r.amount < 0 ? "text-fg-2" : "text-fg-3")}>{signedSC(r.amount)}</span> },
  { key: "after", header: "Balance after", align: "right", render: (r) => sc(r.balanceAfter) },
  { key: "ref", header: "Reference", mono: true, render: (r) => <Mono>{r.reference ?? "—"}</Mono> },
  { key: "meta", header: "Meta", render: (r) => <JsonToggle value={r.meta} /> },
];

const roundCols: Column<RoundRow>[] = [
  { key: "at", header: "When", render: (r) => <span className="text-fg-3">{dateTime(r.createdAt)}</span> },
  { key: "game", header: "Game", render: (r) => <Link href={`/admin/games/${r.gameSlug}`} className="hover:text-accent-2">{r.gameSlug}</Link> },
  { key: "bet", header: "Bet", align: "right", render: (r) => sc(r.bet) },
  { key: "win", header: "Win", align: "right", render: (r) => <span className={r.win > 0 ? "text-credit" : "text-fg-3"}>{sc(r.win)}</span> },
  { key: "mult", header: "×", align: "right", render: (r) => multiplier(r.multiplier) },
  { key: "features", header: "Features", render: (r) => (r.features.length ? <span className="text-fg-2">{r.features.join(", ")}</span> : <span className="text-fg-4">—</span>) },
  { key: "flags", header: "", render: (r) => <span className="flex gap-1">{r.freeSpins ? <Pill tone="info">FS</Pill> : null}{r.bonus ? <Pill tone="accent">Bonus</Pill> : null}{r.jackpotTier ? <Pill tone="warn">{r.jackpotTier}</Pill> : null}</span> },
  { key: "after", header: "Balance after", align: "right", render: (r) => sc(r.balanceAfter) },
  { key: "ms", header: "ms", align: "right", render: (r) => r.durationMs ?? "—" },
  { key: "id", header: "Round", mono: true, render: (r) => <Mono>{r.roundId}</Mono> },
];

const sessionCols: Column<SessionRow>[] = [
  { key: "created", header: "Started", render: (r) => <span className="text-fg-3">{dateTime(r.createdAt)}</span> },
  { key: "seen", header: "Last seen", render: (r) => timeAgo(r.lastSeenAt) },
  { key: "expires", header: "Expires", render: (r) => <span className="text-fg-3">{dateTime(r.expiresAt)}</span> },
  { key: "ip", header: "IP", mono: true, render: (r) => <Mono>{r.ip ?? "—"}</Mono> },
  { key: "ua", header: "User agent", render: (r) => <span className="block max-w-[420px] truncate text-fg-3" title={r.userAgent ?? ""}>{r.userAgent ?? "—"}</span> },
];

const eventCols: Column<SecurityEventRow>[] = [
  { key: "at", header: "When", render: (r) => <span className="text-fg-3">{dateTime(r.createdAt)}</span> },
  { key: "type", header: "Type", mono: true, render: (r) => <Mono className="text-fg">{r.type}</Mono> },
  { key: "sev", header: "Severity", render: (r) => <SeverityPill severity={r.severity} /> },
  { key: "ip", header: "IP", mono: true, render: (r) => <Mono>{r.ip ?? "—"}</Mono> },
  { key: "meta", header: "Meta", render: (r) => <JsonToggle value={r.meta} /> },
];

export default function AdminUserDetailPage() {
  const { id } = useParams<{ id: string }>();
  const q = useAdminQuery<UserDetailResponse>(id ? `/api/admin/users/${id}` : null);
  const d = q.data;
  const [tab, setTab] = React.useState<Tab>("ledger");
  const [adjustOpen, setAdjustOpen] = React.useState(false);
  const [statusOpen, setStatusOpen] = React.useState(false);

  return (
    <>
      <PageHeader
        eyebrow="User"
        title={d ? d.user.username : "User detail"}
        description={d ? <span className="font-mono text-[12px]">{d.user.id}</span> : undefined}
        actions={
          <>
            <Button variant="ghost" size="sm" href="/admin/users">
              <ArrowLeft className="h-3.5 w-3.5" /> All users
            </Button>
            <RefreshButton onClick={() => void q.refresh()} loading={q.refreshing} />
          </>
        }
      />

      {q.error && !d ? (
        <ErrorState error={q.error} onRetry={() => void q.refresh()} title={q.error.status === 404 ? "User not found" : undefined} />
      ) : !d ? (
        <div className="grid gap-4 lg:grid-cols-3">
          <Panel>
            <TableSkeleton rows={4} cols={2} />
          </Panel>
          <Panel>
            <TableSkeleton rows={4} cols={2} />
          </Panel>
          <Panel>
            <TableSkeleton rows={4} cols={2} />
          </Panel>
        </div>
      ) : (
        <div className={cn("space-y-4", q.stale && "opacity-70")}>
          <div className="grid gap-4 lg:grid-cols-3">
            {/* Profile */}
            <Panel title="Profile" actions={<UserStatusPill status={d.user.status} />}>
              <KV
                items={[
                  { label: "Username", value: d.user.username },
                  { label: "Level", value: `${d.user.level} · ${int(d.user.xp)} XP` },
                  { label: "Created", value: dateTime(d.user.createdAt) },
                  { label: "Last login", value: d.user.lastLoginAt ? `${timeAgo(d.user.lastLoginAt)} · ${dateTime(d.user.lastLoginAt)}` : "never" },
                  { label: "Age confirmed", value: d.user.ageConfirmedAt ? dateTime(d.user.ageConfirmedAt) : "—" },
                  { label: "Last rescue", value: d.user.lastRescueAt ? dateTime(d.user.lastRescueAt) : "—" },
                  { label: "Total spins", value: int(d.user.totalSpins) },
                  { label: "Games played", value: int(d.user.gamesPlayed) },
                  { label: "Biggest win", value: sc(d.user.biggestWin) },
                  { label: "Biggest multiplier", value: multiplier(d.user.biggestMultiplier) },
                ]}
              />
              <div className="mt-4 flex flex-wrap gap-2 border-t border-line pt-4">
                {d.user.status === "suspended" ? (
                  <Button variant="outline" size="sm" onClick={() => setStatusOpen(true)}>
                    <UserCheck className="h-3.5 w-3.5" /> Reactivate account
                  </Button>
                ) : (
                  <Button variant="danger" size="sm" onClick={() => setStatusOpen(true)} disabled={d.user.status === "deleted"}>
                    <Ban className="h-3.5 w-3.5" /> Suspend account
                  </Button>
                )}
              </div>
            </Panel>

            {/* Wallet */}
            <Panel
              title="Wallet"
              actions={
                d.invariant.ok ? (
                  <Pill tone="success">
                    <CheckCircle2 className="h-3 w-3" /> ledger = balance
                  </Pill>
                ) : (
                  <Pill tone="danger">
                    <XCircle className="h-3 w-3" /> ledger ≠ balance
                  </Pill>
                )
              }
            >
              <div className="text-[11px] font-medium uppercase tracking-wider text-fg-4">Balance</div>
              <div className="text-3xl font-semibold tracking-tight text-credit">{sc(d.wallet?.balance ?? 0)}</div>
              <KV
                className="mt-4"
                items={[
                  { label: "Lifetime granted", value: sc(d.wallet?.lifetimeGranted ?? 0) },
                  { label: "Lifetime wagered", value: sc(d.wallet?.lifetimeWagered ?? 0) },
                  { label: "Lifetime won", value: sc(d.wallet?.lifetimeWon ?? 0) },
                  { label: "Updated", value: d.wallet ? timeAgo(d.wallet.updatedAt) : "—" },
                ]}
              />
              <div className={cn("mt-4 rounded-sm border px-3 py-2 text-[12px]", d.invariant.ok ? "border-success/30 bg-success/5 text-fg-2" : "border-danger/40 bg-danger/10 text-danger")}>
                <div className="flex items-center gap-1.5 font-semibold uppercase tracking-wider">
                  <Scale className="h-3 w-3" /> Ledger invariant
                </div>
                <div className="mt-1 flex justify-between tabular">
                  <span>Σ ledger amounts</span>
                  <span>{sc(d.invariant.ledgerTotal)}</span>
                </div>
                <div className="flex justify-between tabular">
                  <span>Wallet balance</span>
                  <span>{sc(d.invariant.balance)}</span>
                </div>
                {!d.invariant.ok ? <div className="mt-1 font-medium">Mismatch of {signedSC(d.invariant.balance - d.invariant.ledgerTotal)} — investigate before adjusting.</div> : null}
              </div>
              <div className="mt-4 border-t border-line pt-4">
                <Button variant="outline" size="sm" onClick={() => setAdjustOpen(true)}>
                  Adjust wallet
                </Button>
              </div>
            </Panel>

            {/* Activity snapshot */}
            <div className="grid content-start gap-3">
              <StatGrid cols={3} className="grid-cols-2">
                <StatTile label="Ledger rows" value={int(d.ledger.length)} sub="latest 50" compact />
                <StatTile label="Rounds" value={int(d.rounds.length)} sub="latest 30" compact />
                <StatTile label="Sessions" value={int(d.sessions.length)} sub="active + expired" compact />
              </StatGrid>
              <StatGrid cols={3} className="grid-cols-2">
                <StatTile label="Security events" value={int(d.events.length)} tone={d.events.some((e) => e.severity === "high") ? "danger" : "neutral"} sub="latest 30" compact />
                <StatTile label="Round RTP" value={roundRtp(d.rounds)} sub="latest rounds" compact />
                <StatTile label="Bonus rounds" value={int(d.rounds.filter((r) => r.bonus || r.freeSpins).length)} compact />
              </StatGrid>
            </div>
          </div>

          <Panel
            padded={false}
            title={
              <Tabs<Tab>
                value={tab}
                onChange={setTab}
                items={[
                  { value: "ledger", label: `Ledger (${d.ledger.length})` },
                  { value: "rounds", label: `Rounds (${d.rounds.length})` },
                  { value: "sessions", label: `Sessions (${d.sessions.length})` },
                  { value: "events", label: `Security (${d.events.length})` },
                ]}
              />
            }
          >
            {tab === "ledger" ? <DataTable columns={ledgerCols} rows={d.ledger} rowKey={(r) => r.id} dense empty="No ledger entries." /> : null}
            {tab === "rounds" ? <DataTable columns={roundCols} rows={d.rounds} rowKey={(r) => r.id} dense empty="No rounds played." /> : null}
            {tab === "sessions" ? <DataTable columns={sessionCols} rows={d.sessions} rowKey={(r) => r.id} dense empty="No sessions." /> : null}
            {tab === "events" ? <DataTable columns={eventCols} rows={d.events} rowKey={(r) => r.id} dense empty="No security events for this user." /> : null}
          </Panel>

          <AdjustDialog open={adjustOpen} onClose={() => setAdjustOpen(false)} userId={d.user.id} username={d.user.username} balance={d.wallet?.balance ?? 0} onDone={() => void q.refresh()} />
          <StatusDialog open={statusOpen} onClose={() => setStatusOpen(false)} userId={d.user.id} username={d.user.username} suspended={d.user.status === "suspended"} onDone={() => void q.refresh()} />
        </div>
      )}
    </>
  );
}

function roundRtp(rounds: RoundRow[]): string {
  const bet = rounds.reduce((a, r) => a + r.bet, 0);
  const win = rounds.reduce((a, r) => a + r.win, 0);
  return bet ? `${((win / bet) * 100).toFixed(1)}%` : "—";
}

function AdjustDialog({ open, onClose, userId, username, balance, onDone }: { open: boolean; onClose: () => void; userId: string; username: string; balance: number; onDone: () => void }) {
  const [amount, setAmount] = React.useState("");
  const [note, setNote] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);
  const [confirm, setConfirm] = React.useState(false);

  const n = Number(amount);
  const amountOk = /^-?\d+$/.test(amount.trim()) && n !== 0 && Math.abs(n) <= 1_000_000_000;
  const noteOk = note.trim().length >= 3;
  const after = balance + (amountOk ? n : 0);

  function reset() {
    setAmount("");
    setNote("");
    setError(null);
    setConfirm(false);
  }

  async function submit() {
    if (!amountOk || !noteOk) return;
    setBusy(true);
    setError(null);
    try {
      const r = await api<{ balance: number }>(`/api/admin/users/${userId}/adjust`, { json: { amount: n, note: note.trim() } });
      toast({ title: "Wallet adjusted", description: `${username} · ${signedSC(n)} → ${sc(r.balance)}`, tone: "success" });
      reset();
      onClose();
      onDone();
    } catch (e) {
      setError(describeError(e));
      setConfirm(false);
    } finally {
      setBusy(false);
    }
  }

  return (
    <ConfirmDialog
      open={open}
      onClose={() => {
        if (busy) return;
        reset();
        onClose();
      }}
      onConfirm={() => (confirm ? void submit() : setConfirm(true))}
      title={confirm ? "Confirm wallet adjustment" : `Adjust wallet · ${username}`}
      description={confirm ? undefined : "Signed amount in Spinza Credits (SC). Positive grants, negative removes. Logged as a high-severity security event."}
      confirmLabel={confirm ? `Apply ${signedSC(amountOk ? n : 0)}` : "Review"}
      danger={amountOk && n < 0}
      loading={busy}
      disabled={!amountOk || !noteOk}
    >
      {confirm ? (
        <div className="rounded-sm border border-line bg-bg-1 p-3 text-[13px]">
          <div className="flex justify-between">
            <span className="text-fg-3">Player</span>
            <span className="font-medium">{username}</span>
          </div>
          <div className="mt-1 flex justify-between">
            <span className="text-fg-3">Adjustment</span>
            <span className={cn("font-semibold tabular", n > 0 ? "text-success" : "text-danger")}>{signedSC(n)}</span>
          </div>
          <div className="mt-1 flex justify-between">
            <span className="text-fg-3">Balance</span>
            <span className="tabular">
              {sc(balance)} → <span className="text-credit">{sc(after)}</span>
            </span>
          </div>
          <div className="mt-2 border-t border-line pt-2 text-fg-2">“{note.trim()}”</div>
          {after < 0 ? <InlineError>Resulting balance would be negative.</InlineError> : null}
        </div>
      ) : (
        <div className="space-y-3">
          <div>
            <FieldLabel hint={amountOk ? `→ ${sc(after)}` : "integer, non-zero"}>Amount (SC)</FieldLabel>
            <DenseInput inputMode="numeric" placeholder="e.g. 5000 or -2500" value={amount} onChange={(e) => setAmount(e.target.value.replace(/[^\d-]/g, ""))} className="font-mono" />
          </div>
          <div>
            <FieldLabel hint={`${note.trim().length}/200 · min 3`}>Note</FieldLabel>
            <DenseTextarea rows={2} maxLength={200} placeholder="Why is this adjustment being made?" value={note} onChange={(e) => setNote(e.target.value)} />
          </div>
          <div className="flex gap-1.5">
            {[1000, 5000, 10000, -1000].map((v) => (
              <button key={v} type="button" onClick={() => setAmount(String(v))} className="rounded-xs border border-line px-2 py-1 text-[11px] text-fg-3 hover:text-fg">
                {signedSC(v)}
              </button>
            ))}
          </div>
        </div>
      )}
      {error ? (
        <div className="mt-3">
          <InlineError>{error}</InlineError>
        </div>
      ) : null}
    </ConfirmDialog>
  );
}

function StatusDialog({ open, onClose, userId, username, suspended, onDone }: { open: boolean; onClose: () => void; userId: string; username: string; suspended: boolean; onDone: () => void }) {
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);
  const next = suspended ? "active" : "suspended";

  async function submit() {
    setBusy(true);
    setError(null);
    try {
      await api(`/api/admin/users/${userId}/status`, { json: { status: next } });
      toast({ title: next === "suspended" ? "Account suspended" : "Account reactivated", description: username, tone: next === "suspended" ? "danger" : "success" });
      onClose();
      onDone();
    } catch (e) {
      setError(describeError(e));
    } finally {
      setBusy(false);
    }
  }

  return (
    <ConfirmDialog open={open} onClose={onClose} onConfirm={() => void submit()} title={suspended ? `Reactivate ${username}?` : `Suspend ${username}?`} description={suspended ? "The player will be able to sign in and play again." : "All active sessions are revoked immediately and the player cannot sign in until reactivated. Credits and progress are kept."} confirmLabel={suspended ? "Reactivate" : "Suspend"} danger={!suspended} loading={busy}>
      {error ? <InlineError>{error}</InlineError> : null}
    </ConfirmDialog>
  );
}